<template>
  <div>
    <el-table
      ref="materialLibraryTable"
      width="100%"
      height="320px"
      :data="materialLibraryData"
      highlight-current-row
      :row-style="{height: '0'}"
      :cell-style="{padding: '1px'}" border style="width: 100%;font-size: 13px;"
      v-bind:style="{ height: materialLibraryData.length?'320px' : '100px'}"
      border size="small"
      @selection-change="handleSelectionChange">
      <el-table-column
        type="selection"
        width="55">
      </el-table-column>
      <el-table-column
        prop="number"
        :label="$t('message.materialLibraryManager.number')"
        align="center"
        width="100"
      >
      </el-table-column>
      <el-table-column
        prop="name"
        :label="$t('message.materialLibraryManager.name')"
        align="center"
        width="150"
      >
      </el-table-column>
      <el-table-column
        prop=level
        sortable
        :label="$t('message.materialLibraryManager.level')"
        align="center"
        width="180"
      >
      </el-table-column>
      <el-table-column
        prop="area"
        sortable
        :label="$t('message.materialLibraryManager.area')"
        align="center"
        width="180"
      >
      </el-table-column>
      <el-table-column
        prop="density"
        sortable
        :label="$t('message.materialLibraryManager.density')"
        align="center"
        width="180"
      >
      </el-table-column>
      <el-table-column
        prop="standard"
        sortable
        :label="$t('message.materialLibraryManager.standard')"
        align="center"
        width="180"
      >
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  name: "MaterialLibraryTable",
  props:{
    materialLibraryData:{
      type: Array,
      default: () => []
    },
    clearSelectedItems:{
      type: Boolean,
      default: true
    }
  },
  data(){
   return{
     //复选框选择项
     selectedRowData:[]
   }
  },
  mounted() {

  },
  methods:{
    handleSelectionChange(val) {
      this.selectedRowData = [];
      this.selectedRowData = val;
      this.$emit('selected-row-data',this.selectedRowData);
    },
  },
  watch:{
    'clearSelectedItems':{
      handler(o,n){
        this.selectedRowData = [];
        this.$refs.materialLibraryTable.clearSelection()
      }
    }
  }
}
</script>

<style scoped>

</style>